<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
  </head>
  <style>
    html,
    body,
    #app {
      height: 100%;
    }
  
    * {
      padding: 0;
      margin: 0;
      font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
        "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
    }
  
    .preload {
      display: flex;
      flex-direction: column;
      height: 100%;
      letter-spacing: 1px;
      background-color: #2f3447;
    }
  
    .preload .container {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      width: 100%;
      user-select: none;
      flex-grow: 1;
    }
  
    .preload .name {
      margin-bottom: 30px;
      font-size: 30px;
      font-weight: bold;
      letter-spacing: 5px;
      color: #fff;
    }
  
    .preload .title {
      margin: 30px 0 20px 0;
      font-size: 14px;
      color: #fff;
    }
  
    .preload .sub-title {
      font-size: 12px;
      color: #ababab;
    }
  
    .preload .footer {
      padding: 10px 0 20px 0;
      text-align: center;
    }
  
    .preload .footer a {
      font-size: 12px;
      color: #ababab;
      text-decoration: none;
    }
  
    .preload .loading {
      position: relative;
      width: 30px;
      height: 30px;
      border: 7px solid currentColor;
      border-bottom-color: #2f3447 !important;
      border-radius: 30px;
      transform: rotate(0deg);
      animation: r 1s infinite cubic-bezier(0.17, 0.67, 0.83, 0.67),
        bc 2s infinite ease-in;
    }
  
    @keyframes r {
      from {
        transform: rotate(0deg);
      }
  
      to {
        transform: rotate(360deg);
      }
    }
  
    .preload .loading::after,
    .preload .loading::before {
      position: absolute;
      bottom: -2px;
      display: inline-block;
      width: 7px;
      height: 7px;
      background-color: currentColor;
      border-radius: 10px;
      content: "";
    }
  
    .preload .loading::after {
      left: -1px;
    }
  
    .preload .loading::before {
      right: -1px;
    }
  
    @keyframes bc {
      0% {
        color: #689cc5;
      }
  
      25% {
        color: #b3b7e2;
      }
  
      50% {
        color: #93dbe9;
      }
  
      75% {
        color: #abbd81;
      }
  
      100% {
        color: #689cc5;
      }
    }
  </style>
  <body>
    <div id="app">
      <div class="preload">
        <div class="container">
          <p class="name">COOL-ADMIN</p>
          <div class="loading"></div>
          <p class="title">正在加载资源...</p>
          <p class="sub-title">初次加载资源可能需要较多时间 请耐心等待</p>
        </div>
      
        <div class="footer">
          <a href="https://cool-js.com/" target="_blank"> https://cool-js.com </a>
        </div>
      </div>
    </div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>
